<template>
  <view>
    <view class="tabs-box">
      <u-sticky bgColor="#fff">
        <u-tabs :list="list1" lineColor="#f00"></u-tabs>
      </u-sticky>
    </view>
    <view class="goods-list">
      <view v-if="productList.length != 0">
        <view class="goods-item" v-for="(item, index) in productList" :key="index">
          <view class="top-box">
            <view>商品ID：{{ item.product_id }}</view>
            <view>{{ item.pay_status | filterStatus }}</view>
          </view>
          <view class="middle-box">
            <view class="product-image">
              <image :src="item.product.product_img" class="image"></image>
            </view>
            <view class="product-info">
              <view class="product-name">{{ item.product.product_name }}</view>
              <view class="product-price">{{ item.product.sale_price }} x 1</view>
            </view>
          </view>
          <view class="bottom-box">
            <view>下单时间：{{ item.create_time }}</view>
          </view>
          <view class="btn-box" v-if="item.video">
            <view class="view-btn sure-btn" @click="handleClickQueue(item.order_id)" v-if="item.is_queue == '0'">确认排队</view>
            <!-- <view class="view-btn" @click="handleClickView(item.product.qrcode)">上传商品橱窗二维码</view> -->
            <view class="view-btn" @click="handleClickView(item.product.qrcode)">查看二维码</view>
          </view>
        </view>
      </view>
      <view v-else class="empty-box">
      <image src="/static/mescroll-empty.png" class="empty-img"></image>
      <view>暂无订单记录</view>
    </view>
    </view>

    <u-modal :show="show" 
    :title="title" 
    :content='content' 
    @confirm="confirm" 
    @cancel="cancel" 
    :show-cancel-button="true"
    cancelText="取消"
    ></u-modal>
  </view>
</template>
<script>
export default {
  components: {

  },
  data() {
    return {
      list1: [{
        name: '全部',
      }, 
      // {
      //   name: '待支付',
      // }, {
      //   name: '已完成'
      // }
    ],
      productList: [],
      show: false,
      title: '提示',
      content: '是否确认该商品进行排队?',
      orderId: '',
    }
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      uni.showLoading({
        mask: true,
        title: '数据加载中...'
      })
      this.$api.baseInfo.orderList().then(res => {
        uni.hideLoading();
        console.log(res);
        this.productList = res.data.data;
        console.log(this.productList);
      })
    },
    handleClickView(qrcode) {
      console.log(qrcode);
			// this.$utils.toPage('/pages/me/upWindow?qrcode=' + qrcode);
        uni.navigateTo({
            url: '/pages/me/upWindow?qrcode=' + qrcode//可进行字符串拼接
        });
		},
    handleClickQueue(v) {
      console.log(v);
      this.orderId = v;
      this.show = true;
    },
    confirm() {
      let { orderId } = this;
      let obj = {
        order_id:  orderId
      }
      this.$api.baseInfo.confirmQueue(obj).then(res => {
        this.show = false;
        this.getOrderList();
        setTimeout(() => {
          uni.$u.toast(res.msg);
        }, 2000)
      })
    },
    cancel() {
      this.show = false;
    }
  },
  filters: {
    filterStatus(val) {
      let str = "";
      switch (val) {
        case 0:
          str = "待确认";
          break;
        case 1:
          str = "已完成";
          break;
        default:
          str = "不确认状态"
      }
      return str;
    },
  },
}
</script>
<style>
.goods-list {
  margin: 20rpx;
}

.goods-item {
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.top-box {
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  font-size: 28rpx;
}

.top-box {
  color: #606266;
}

.bottom-box {
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.middle-box {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: flex-start;
}

.product-image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
}

.image {
  width: 200rpx;
  height: 200rpx; 
  border-radius: 20rpx;
}

.product-info {
  font-size: 28rpx;
  /* display: flex;
  flex-direction: column;
  height: 200rpx; */
}

.product-name {
  font-size: 30rpx;
  font-weight: 600;
  margin-bottom: 50rpx;
  margin-top: 20rpx;
}

.btn-box {
  display: flex;
  /* align-items: end; */
  justify-content: flex-end;
  margin-top: 20rpx;
}

.view-btn {
  /* background: #F7CF5F; */
  padding: 8rpx 20rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin-left: 20rpx;
  border: 1rpx solid #eee;
  /* color: #fff; */
}

.sure-btn {
  /* background: #00663A; */
}

.empty-img {
  width: 240rpx;
  height: 240rpx;  
}

.empty-box {
  text-align: center;
  margin-top: 200rpx;
  font-size: 26rpx;
  color: #7a7474;
}
</style>